<!--分区域-->
<template>
    <div class="budgetDelivery-tab1">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="年度">
                    <el-date-picker
                        v-model="form.year"
                        value-format="yyyy"
                        type="year"
                        placeholder="选择年"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="跟踪月份">
                    <el-select
                        v-model="form.trackingMonth"
                        placeholder="请选择"
                        @change="selectTrigger"
                    >
                        <el-option value="全年">全年</el-option>
                        <el-option value="上半年">上半年</el-option>
                        <el-option value="下半年">下半年</el-option>
                        <el-option value="自定义">自定义</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="btnForm" style="width: 27%;">
                    <el-button
                        size="small"
                        type="primary"
                        @click="submitHandle()"
                        >查询</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="allExportModal()"
                        >批量导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportModal()"
                        class="export"
                        >导出</el-button
                    >
                </el-form-item>
                <el-form-item class="annual">
                    <template>
                        <el-checkbox-group
                            v-model="checkList"
                            @change="checkedMonth"
                        >
                            <el-checkbox
                                v-for="(item, index) in form.checkedContent"
                                :label="item.index"
                                :key="index"
                                >{{ item.value }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </template>
                </el-form-item>
                <el-form-item class="annual">
                    <template>
                        <div class="title">筛选条件：</div>
                        <div class="border">
                            <div>
                                <span class="paddRig">跟踪指标：</span>
                                <el-checkbox-group
                                    v-model="trackingArr"
                                    @change="trackingClick"
                                >
                                    <el-checkbox
                                        v-for="(item, index) in trackType"
                                        :label="item"
                                        :key="index"
                                        >{{ item.indexName }}</el-checkbox
                                    >
                                </el-checkbox-group>
                            </div>
                            <div>
                                <span class="paddRig">跟踪维度：</span>
                                <el-radio-group
                                    v-model="form.radio"
                                    @change="checedRadio"
                                >
                                    <el-radio :label="1">全部明细</el-radio>
                                    <el-radio :label="2">只看进度</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </template>
                </el-form-item>
            </el-form>
        </div>
        <p class="g-unit">单位: 万元</p>
        <div v-show="form.radio == 1">
            <div
                class="tableBox"
                v-for="(item, index) in tableAllData"
                :key="item.proType"
                v-if="tableDataObj['tableData' + index].length > 0"
            >
                <el-table
                    v-loading="tableLoading"
                    :data="tableDataObj['tableData' + index]"
                    height="85vh"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
                    :ref="'tableData' + index"
                >
                    <el-table-column
                        :label="item.proType"
                        prop="areaName"
                        class-name="first-title"
                        width="100"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        label="月度预算"
                        class-name="third-title"
                        width="120"
                    >
                        <el-table-column
                            v-for="(item, index) in colDefList"
                            :key="index"
                            :label="item"
                        >
                            <el-table-column
                                width="100"
                                label="目标值"
                                :prop="'targetValue' + index"
                            ></el-table-column>
                            <el-table-column
                                width="100"
                                label="实际完成"
                                :prop="'actValue' + index"
                            ></el-table-column>
                            <el-table-column
                                label="完成进度(%)"
                                :prop="'process' + index"
                            ></el-table-column>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 只看进度 -->
        <div v-show="form.radio == 2">
            <div
                class="tableBox"
                v-for="(item1, index1) in tableAllData1"
                :key="item1.proType"
                v-if="
                    tableDataObj1['tableData' + index1].length > 0 &&
                    trackingArr &&
                    JSON.stringify(trackingArr).indexOf(item1.proType) > -1
                "
            >
                <el-table
                    v-loading="tableLoading"
                    :data="tableDataObj1['tableData' + index1]"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
                    :ref="'tableData' + index1"
                >
                    <el-table-column
                        :label="item1.proType"
                        prop="areaName"
                        class-name="first-title"
                        width="100"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        label="月度预算"
                        prop="indexName"
                        class-name="third-title"
                        width="120"
                    >
                        <el-table-column
                            v-for="(item, index) in colDefList1"
                            :key="index"
                            :label="item"
                            :prop="'process' + index"
                        >
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
export default {
    name: "budgetDelivery-tab1",
    props: {
        areaList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            form: {
                areaId: accountInfo.areaId,
                year: "",
                trackingMonth: "全年",
                dimension: 1,
                radio: 1,
                checkedContent: [
                    { index: "01", value: "1月" },
                    { index: "02", value: "2月" },
                    { index: "03", value: "3月" },
                    { index: "04", value: "4月" },
                    { index: "05", value: "5月" },
                    { index: "06", value: "6月" },
                    { index: "07", value: "7月" },
                    { index: "08", value: "8月" },
                    { index: "09", value: "9月" },
                    { index: "10", value: "10月" },
                    { index: "11", value: "11月" },
                    { index: "12", value: "12月" },
                ],
            },
            accountInfo: "",
            checkList: [],
            indexType: 1,
            trackType: [],
            trackingList: [],
            trackingArr: [],
            checked: [],
            indexTypeStr: [],
            trackMonthStr: [],
            colDefList: [],
            colDefList1: [],
            tableData: [],
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            tableData5: [],
            tableData6: [],
            tableData7: [],
            tableData8: [],
            tableData9: [],
            tableData10: [],
            tableData11: [],
            tableLoading: false,
            tableAllData: [],
            tableDataObj: {},
            tableAllData1: [],
            tableDataObj1: {},
        };
    },
    created() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    },
    mounted() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.getParams();
    },
    methods: {
        async getParams() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.checkList = [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12",
            ];
            this.form.year = await this.getMaxMonthByTrackType();
            this.trackMonthStr = [];
            for (let item of this.checkList) {
                this.trackMonthStr.push(this.form.year + item);
            }
            let trackType = await this.getTrackType();
            this.trackingArr = trackType;
            this.submitHandle();
        },
        //获取时间数组对象
        checkedMonth(val) {
            this.checkList = val;
            this.trackMonthStr = [];
            for (let item of this.checkList) {
                this.trackMonthStr.push(this.form.year + item);
            }
            this.tableData = [];
            // this.submitHandle();
        },
        //获取指标数组对象
        trackingClick(val) {
            // alert("1")
            // this.submitHandle();
        },
        // 下拉框事件
        selectTrigger(val) {
            this.form.trackingMonth = val;
            if (this.form.trackingMonth == "全年") {
                this.checkList = [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                ];
                this.trackMonthStr = [];
                for (let item of this.checkList) {
                    this.trackMonthStr.push(this.form.year + item);
                }
                this.submitHandle();
            }
            if (this.form.trackingMonth == "上半年") {
                this.checkList = ["01", "02", "03", "04", "05", "06"];
                this.trackMonthStr = [];
                for (let item of this.checkList) {
                    this.trackMonthStr.push(this.form.year + item);
                }
                this.submitHandle();
            }
            if (this.form.trackingMonth == "下半年") {
                this.checkList = ["07", "08", "09", "10", "11", "12"];
                this.trackMonthStr = [];
                for (let item of this.checkList) {
                    this.trackMonthStr.push(this.form.year + item);
                }
                this.submitHandle();
            }
            if (this.form.trackingMonth == "自定义") {
                this.checkList = [];
                this.trackMonthStr = [];
                for (let item of this.checkList) {
                    this.trackMonthStr.push(this.form.year + item);
                }
                this.submitHandle();
            }
        },
        //获取跟踪指标
        getTrackType() {
            var that = this;
            return new Promise((resolve) => {
                $budgetAPI.getTrackType(
                    { indexType: this.indexType },
                    (res) => {
                        if (res && res.code == 0) {
                            that.trackType = res.content;
                            // that.indexTypeStr = res.content;
                            resolve(res.content);
                        }
                    },
                    (err) => {}
                );
            });
        },
        //获取年份
        getMaxMonthByTrackType() {
            var that = this;
            return new Promise((resolve) => {
                $budgetAPI.getMaxMonthByTrackType(
                    {
                        indexType: this.indexType,
                        areaId: this.form.areaId
                            ? this.form.areaId
                            : this.accountInfo.areaId,
                    },
                    (res) => {
                        if (res && res.code == 0) {
                            that.form.year = res.content;
                            resolve(res.content);
                        }
                    },
                    (err) => {}
                );
            });
        },
        //获取跟踪维度
        checedRadio(val) {
            this.form.radio = val;
            this.submitHandle();
        },
        //点击查询
        async submitHandle() {
            this.trackMonthStr = [];
            for (let item of this.checkList) {
                this.trackMonthStr.push(this.form.year + item);
            }
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            let params = {
                areaId: this.form.areaId
                    ? this.form.areaId
                    : this.accountInfo.areaId,
                testYear: this.form.year,
                indexTypeStr: JSON.stringify(this.trackingArr),
                trackMonthStr: JSON.stringify(this.trackMonthStr),
                indexType: 1,
            };
            this.getData(params);
        },
        getData(params) {
            if (this.form.radio == 1) {
                this.tableLoading = true;
                var that = this;
                $budgetAPI.getReleaseTrackData(params, (res) => {
                    if (res.code === 0) {
                        that.tableLoading = false;
                        that.colDefList = res.content.acctMonths;
                        that.tableAllData = res.content.data;
                        res.content.data.forEach((item, index) => {
                            that.$set(
                                that.tableDataObj,
                                "tableData" + index,
                                item.dataList
                            );
                            that.tableDataObj["tableData" + index].map(
                                (item, index) => {
                                    item.dataList.map((ele, ind) => {
                                        item["targetValue" + ind] =
                                            ele.targetValue;
                                        item["actValue" + ind] = ele.actValue;
                                        item["process" + ind] = ele.process;
                                    });
                                }
                            );
                        });
                    } else {
                        this.alertError(res);
                    }
                    setTimeout(() => {
                        for (let prop in that.tableDataObj) {
                            that.$refs[prop] &&
                                that.$refs[prop][0] &&
                                that.$refs[prop][0].doLayout();
                        }
                    }, 500);
                });
            } else {
                this.tableLoading = true;
                var that = this;
                $budgetAPI.getReleaseTrackData(params, (res) => {
                    if (res.code === 0) {
                        that.tableLoading = false;
                        that.colDefList1 = res.content.acctMonths;
                        that.tableAllData1 = res.content.data;
                        res.content.data.forEach((item, index) => {
                            that.$set(
                                that.tableDataObj1,
                                "tableData" + index,
                                item.dataList
                            );
                            that.tableDataObj1["tableData" + index].map(
                                (item, index) => {
                                    item.dataList.map((ele, ind) => {
                                        item["targetValue" + ind] =
                                            ele.targetValue;
                                        item["actValue" + ind] = ele.actValue;
                                        item["process" + ind] = ele.process;
                                    });
                                }
                            );
                        });
                    } else {
                        this.alertError(res);
                    }
                    setTimeout(() => {
                        for (let prop in that.tableDataObj1) {
                            that.$refs[prop] &&
                                that.$refs[prop][0] &&
                                that.$refs[prop][0].doLayout();
                        }
                    }, 500);
                });
            }
        },
        //导出
        exportModal() {
            let areaId = this.form.areaId;
            let testYear = this.form.year;
            let indexTypeStr1 = [];
            this.trackingArr.map((item, index) => {
                indexTypeStr1[index] = item.indexCode;
            });
            // let indexTypeStr = JSON.stringify(indexTypeStr1);
            let indexTypeStr = indexTypeStr1.toString().replace(/\"/gi, "'");
            // let trackMonthStr = JSON.stringify(this.trackMonthStr);
            let trackMonthStr = this.trackMonthStr.toString().replace(/\"/gi, "'");
            let indexType = 1;
            let token = getCookie("token");
            if (this.form.radio == 1) {
                let isShowDetail = true;
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == "development") {
                    window.location.href =
                        prefixAPI.loc +
                        `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                } else if (process.env.NODE_ENV == "production") {
                    window.location.href =
                        prefixAPI.hp +
                        `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                }
            } else {
                let isShowDetail = false;
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == "development") {
                    window.location.href =
                        prefixAPI.loc +
                        `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                } else if (process.env.NODE_ENV == "production") {
                    window.location.href =
                        prefixAPI.hp +
                        `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                }
            }
        },
        //批量导出
        allExportModal() {
            let areaId = this.form.areaId;
            let testYear = this.form.year;
            let indexTypeStr1 = [];
            this.trackingArr.map((item, index) => {
                indexTypeStr1[index] = item.indexCode;
            });
            let indexTypeStr = indexTypeStr1.toString().replace(/\"/gi, "'");
            let trackMonthStr = this.trackMonthStr.toString().replace(/\"/gi, "'");

            let indexType = 1;
            let token = getCookie("token");
            if (this.form.radio == 1) {
                let isShowDetail = true;
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == "development") {
                    window.location.href =
                        prefixAPI.loc +
                        `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                } else if (process.env.NODE_ENV == "production") {
                    window.location.href =
                        prefixAPI.hp +
                        `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                }
            } else {
                let isShowDetail = false;
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == "development") {
                    window.location.href =
                        prefixAPI.loc +
                        `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                } else if (process.env.NODE_ENV == "production") {
                    window.location.href =
                        prefixAPI.hp +
                        `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
                }
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.budgetDelivery-tab1 {
    .local {
        .cell {
            color: #000000;
            font-weight: 700;
        }
    }

    .operation {
        .annual {
            width: 100%;
            padding-left: 20px;
            .el-form-item__content {
                width: 100%;
            }
            .title {
                font-size: 18px;
            }
            .paddRig {
                padding-right: 25px;
            }
            .border {
                border: 1px solid #dcdfe6;
                padding: 0 20px;
                margin-bottom: 10px;
                .el-checkbox-group {
                    display: inline-block;
                }
            }
        }
        .btnForm {
            // float: right;
            text-align: right;
            .el-form-item__content {
                float: right;
                width: 100%;
                .export {
                    // float: right;
                }
            }
        }
    }
}
</style>
